import { observer } from 'mobx-react-lite';
import logo from '../../img/logo.png'
import { useEffect } from 'react';
import { Button, Input } from 'antd';
import { useRoutes, useNavigate, Outlet } from 'react-router-dom'
import routes from '../../router/index'
import './index.css'
export default observer((props) => {
    useEffect(() => {
        props.homepagestore.getHome();
    }, []);
     //编程式导航
    const goto = useNavigate();
    function gotohot() {
        goto('/hot');
    }
    function gotorank() {
        goto('/ranking');
    }
    function gotosonglist() {
        goto('/songlist');
    }
    function gotoradio() {
        goto('/radio');
    }
    function gotosongmen() {
        goto('/songmen');
    }
    return (
        <div>
            <div className='nav-background'>
                <div className='nav-top'>
                    <div className='logo'>
                        <img src={logo} alt="" />
                    </div>
                    <div className='navigation-bar'>
                        <div>发现音乐</div>
                        <div>我的音乐</div>
                        <div>关注</div>
                        <div>商城</div>
                        <div>音乐人</div>
                        <div>下载客户端</div>
                    </div>
                    <div className='nav-tail'>
                        <div><Input placeholder="Basic usage" size="large" /></div>
                        <div>  <Button type="link" shape='round'>Link Button</Button></div>
                        <div>登录</div>
                    </div>
                </div>
                <div className='second-nav'>
                    <div className='second-nav-box'>
                        <div onClick={gotohot} >推荐</div>
                        <div onClick={gotorank}>排行榜</div>
                        <div onClick={gotosonglist}>歌单</div>
                        <div onClick={gotoradio}>主播电台</div>
                        <div onClick={gotosongmen}>歌手</div>
                        
                    </div>
                </div>
            </div>
            <Outlet/>
        </div>
    )

})
